<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>

        <title>Registro de Usuario</title>

        <script src="./jQuery/js/jquery-latest.pack.js" type="text/javascript"></script>
        <script src="./jQuery/js/jcarousellite_1.0.1c4.js" type="text/javascript"></script>
        <script src="./jQuery/js/jquery-1.4.4.min.js" type="text/javascript"></script>


        <script language="javascript" type="text/javascript" >
           function validarEmail() {
               var valor = document.getElementById("j_idt6:email").value;
                if ((/[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/.test(valor)) ){
                        alert("La dirección de email " + valor + " es correcta.")
                        return (true)
                } else {
                        alert("La dirección de email es incorrecta.");
                        return (false);
                }
            }
        </script>

        <style>
          body {
                width: 960px;
                margin: 40px auto;
                height:100%;
                font-size:14px;
                color:black;
                font-family:Arial, Helvetica, sans-serif;
                background-color: #708090;
            }

            #container_index {text-align:center; margin:0 auto; width:100%;}

#connect {text-align:left; margin:-10px auto; width:930px;}

.connect_yellowborder {border-left:10px solid #1a67b8; height:139px; position:absolute; margin:10px 0 0 -19px;}

.title_big {display:block; text-align:left; font-size:50px; color:white; font-family:BebasNeue, Segoe UI, sans-serif; text-transform:uppercase; line-height:40px;margin-top:10px;}


.connect_text {text-align:justify; font-size:13px; color:white; font-family:Segoe UI, Arial, sans-serif; line-height:1.2; margin-top:12px; height:75px;}


.login {text-align:left; width:425px; display:inline-block; vertical-align:top;}

.title_medium {text-align:left; font-size:42px; color:white; font-family:BebasNeue, Segoe UI, sans-serif; text-transform:uppercase;}


.login_text {width:425px; text-align:justify; font-size:13px; color:white; font-family:Segoe UI, Arial, sans-serif; line-height:1.2; margin-top:12px; height:45px;}

.login_form {list-style-type:none; padding:0; text-align:left; width:425px; display:inline-block; font-size:13px; color:white; font-family:Segoe UI, Arial, sans-serif; line-height:1.7;}



.login_form label {width:110px; display:inline-block;}

.verticalborder {border-left:1px solid #cdcbc8; height:245px; display:inline-block; margin:9px 25px 0 25px;}

.newaccount {text-align:left; width:425px; display:inline-block; vertical-align:top;}

.login_button {text-align:left; margin:15px 0 0 114px;}

  </style>



    </h:head>

    <h:body>

<p:growl autoUpdate="true" showDetail="true" id="error"/>


<h:outputLink value="/index.html">#{msg.inicio}</h:outputLink>


            <!--CONNECT-->
          <div id="connect">
            <div class="connect_yellowborder"></div>
		<div class="title_big">#{msg.title_big}</div>
		<div class="connect_text">#{msg.connect_text}</div>
                <!--LOGIN-->

                <div class="login">
                    <h:form>
                        <div class="title_medium">#{msg.title_medium}</div>
                    <div class="login_text">#{msg.login_text}</div>
                    <ul class="login_form">
                        <li><label>#{msg.nickname}:*</label><h:inputText value="#{usuarioControlador.usuariologeado.username}" id="username" required="true" label="username"/><span class="error"></span></li>
                        <li><label>#{msg.contrasena}:*</label><h:inputSecret value="#{usuarioControlador.usuariologeado.password}" id="password" required="true" label="password"/><span class="error"></span></li>
                    </ul>
                    <p:commandButton value="#{msg.conectar}" ajax="false" action="irlogin"  icon="/stylesheets/login.jpeg" update="error"/>
                    </h:form>
                </div>

                <!--NEW ACCOUNT-->



                 <div class="verticalborder"></div>
                 <div class="newaccount" id="createacct">
                     <h:form onsubmit="return validarEmail()" >
                         <div class="title_medium">#{msg.create_account}</div>
                <div class="login_text">#{msg.new_menber}</div>
                <ul class="login_form">
                    <li><label>#{msg.nickname}:* </label><p:inputText id="nickname" value="#{usuarioControlador.usuario.username}"  required="true" title="#{msg.nickname}"/><span class="error"></span></li>
                    <li><label>#{msg.contrasena}:* </label><p:password id="contraseña" value="#{usuarioControlador.usuario.password}" required="true" title="#{msg.contrasena}"/><span class="error"></span></li>
                    <li><label>#{msg.email}:* </label><p:inputText id="email" value="#{usuarioControlador.usuario.correo}" required="true" title="#{msg.nombre}"/><span class="error"></span></li>
                    <li><label>#{msg.nombre}:* </label><p:inputText id="dni" value="#{usuarioControlador.usuario.nombre}" required="true" title="#{msg.nombre}"/><span class="error"></span></li>
                    <li><label>#{msg.apellidos}:* </label><p:inputText id="apellidos" value="#{usuarioControlador.usuario.apellidos}" required="true" title="#{msg.apellidos}"/><span class="error"></span></li>
                </ul>

                <div class="login_button">
                    <p:commandButton id="submit" value="#{msg.crear_nuevo}"  ajax="false" action="irCrearUsuario" update="panel"/>
		</div>
                     </h:form>
          </div>
          </div>


        

    </h:body>

</html>

